<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1：响应式导航栏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 在此实现你的导航栏 -->
    <nav class="navbar">
        <!-- Logo区域 -->
        <div class="navbar-brand">
            <a href="#" class="logo">Logo</a>
            <button class="navbar-toggle" aria-label="切换导航菜单">
                <span class="hamburger"></span>
            </button>
        </div>

        <!-- 导航链接 -->
        <div class="navbar-menu">
            <ul class="nav-links">
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </div>

        <!-- 用户操作区 -->
        <div class="navbar-end">
            <a href="#" class="button">登录</a>
            <a href="#" class="button primary">注册</a>
        </div>
    </nav>

    <!-- 页面内容 -->
    <main>
        <h1>响应式导航栏练习</h1>
        <p>请完成以下任务：</p>
        <ol>
            <li>使用Flexbox实现导航栏布局</li>
            <li>添加响应式设计</li>
            <li>实现汉堡菜单动画</li>
            <li>美化界面样式</li>
        </ol>
    </main>

    <script src="script.js"></script>
</body>
</html>
